<template>
    <div>
        <div class="backButton">
            <button @click="back">
                <van-icon name="arrow-left"/>
            </button>
        </div>
        <!--      轮播图·-->
        <van-swipe :autoplay="3000" height="300px">
            <van-swipe-item v-for="(image, index) in gallery" :key="index">
                <van-image width="100%" height="300px" lazy-load fit="cover" :src="image.img_url"/>
            </van-swipe-item>
        </van-swipe>
        <Tips/>
        <div class="info">
            <span style="font-size: 23px; margin: 0.1rem 0">{{ info.name }}</span>
            <span style="font-size: 14px; margin: 0.1rem 0">{{ info.goods_brief }}</span>
            <span style="font-size: 20px; margin: 5px 0; color: darkred; ">{{ info.retail_price }}￥</span>
        </div>

        <!--    商品信息组件-->
        <van-sku v-model="isShowSku" :sku="sku" :goods="goods" :goods-id="goods.goodsId" @buy-clicked="onBuyClicked"
                 @add-cart="onAddCartClicked" ref="sku"/>

        <!--    商品导航-->
        <van-goods-action placeholder safe-area-inset-bottom>
            <van-goods-action-icon @click="addCollection" :icon="iconStyle" :text="text" color="#ff5000"/>
            <van-goods-action-icon icon="cart" text="购物车" @click="$router.push('/cart')" :badge="goodsCount"
                                   color="#ff5000"/>
            <van-goods-action-button type="warning" text="加入购物车" @click="ShowAddShopCar"/>
        </van-goods-action>

        <!--    商品参数-->
        <div class="parameter">
            <h3>商品参数</h3>
            <div class="parameter-content" v-for="(item, index) in attribute" :key="index">
                <span class="name">{{ item.name }}</span>
                <span class="value van-ellipsis">{{ item.value }}</span>
            </div>
        </div>
        <div class="goodsDesc" v-html="info.goods_desc"></div>
        <!--    常见问题-->
        <van-divider>
            <span class="font">常见问题</span>
        </van-divider>
        <ul class="question">
            <li v-for="item in issue" :key="item.id">
                <div class="title">
                    <div class="point"></div>
                    <b>{{ item.question }}</b>
                </div>
                <p>
                    {{ item.answer }}
                </p>
            </li>
        </ul>
        <van-divider>
            <div>相关产品</div>
        </van-divider>
        <!-- 相关产品 -->
        <Products :goodsList="goodsList"/>

    </div>
</template>

<script>
import {AddShopCar, getGoodsCount, GetGoodsDetail, GetRelated} from "@/api/home";
import Tips from "@/components/Tips";
import assets from "@/assets/avatar.png"
import Products from "@/components/Products";
import {Toast} from "vant";

export default {
    name: "productDetail",
    components: {
        Tips,
        Products,
    },
    data() {
        return {
            //商品导航栏
            iconStyle: "star-o",
            text: "收藏",
            goodsCount: 0,

            popupGoodsValue: 1,
            popupShow: false,
            gallery: "", //商品轮播图
            info: "", // 商品信息
            attribute: [],
            issue: [], //相关问题
            avatar: assets, //头像
            goodsList: [], //相关产品的列表

            productList: [],

            isShowSku: false,
            sku: {
                tree: [],
                hide_stock: false,
                price: 0,
                stock_num: 0,
            },
            goods: {
                goodsId: "",
                picture: "",
            },
        }
    },
    methods: {
        //返回键
        back() {
            this.$router.go(-1);
        },
        ShowAddShopCar() {
            //如果sku没有展示sku组件
            if (this.popupShow) {
                //加入购物车
                console.log("执行加入购物车操作");
            } else {
                this.isShowSku = true;
            }
        },
        async onAddCartClicked() {
            //弹出层的购物车
            //获取商品数量
            let counts = this.$refs.sku.getSkuData().selectedNum;
            //构建商品对象
            let goodsInfo = {
                goodsId: this.$route.query.id,
                productId: this.productList[0].id,
                number: counts,
            };
            //发送请求

            let res = await AddShopCar(goodsInfo);
            if (res.errno === 0) {
                Toast("加入购物车成功");
                this.isShowSku = false;
                getGoodsCount().then(res => {
                    this.goodsCount = res.data.cartTotal.goodsCount;
                });
            } else {
                Toast("加入失败请刷新重试");
            }
        },
        onBuyClicked() {
            console.log("点击了购买");
        },

        //商品导航栏位置
        addCollection() {
            if (this.iconStyle === "star-o") {
                this.iconStyle = "star";
                this.text = "已收藏";
            } else {
                this.iconStyle = "star-o";
                this.text = "收藏";
            }
        }

    },
    mounted() {
        let goodsId = this.$route.query.id;

        //获取购物车内物品数量
        getGoodsCount().then(res => {
            this.goodsCount = res.data.cartTotal.goodsCount;
        });

        //详情页展示数据
        GetGoodsDetail(goodsId).then(({data}) => {
            this.gallery = data.gallery;
            this.info = data.info;
            this.attribute = data.attribute;
            this.issue = data.issue;

            this.productList = data.productList;

            //sku数据处理
            this.goods.goodsId = goodsId;
            this.sku.price = data.info.retail_price;
            this.sku.stock_num = data.info.goods_number;
            this.goods.picture = data.info.list_pic_url;
        });
        GetRelated(goodsId).then(({data}) => {
            this.goodsList = data.goodsList; //其他相关产品
        });
    },
}
</script>

<style scoped lang="less">
.info {
    background-color: #fff;
    padding: 0.1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top {
    display: flex;
    flex-direction: row;
    justify-content: start;

    .price {
        display: flex;
        flex-direction: column;
        margin: 20px 0 0 20px;
        line-height: 40px;
    }
}

.stepperInfo {
    margin: 15px 0 0 15px;
}

.van-stepper {
    margin-top: 10px;
}

.parameter {
    padding: 0.2rem 0.1rem 0.2rem 0.1rem;

    h3 {
        font-size: 0.2rem;
        padding-bottom: 0.1rem;
    }

    margin-top: 0.2rem;
    background-color: #fff;

    .parameter-content {
        display: flex;
        background-color: #f4f4f4;
        margin-top: 0.05rem;
        border-radius: 0.133333rem;
        padding: 0.1rem 0 0.1rem 0;

        .name {
            flex: 3;
            color: #9999;
            text-align: right;
        }

        .van-ellipsis {
            margin-left: 0.05rem;
            flex: 8;
            text-align: left;
        }
    }
}

/deep/ .goodsDesc {
    img {
        width: 100%;
        display: block;
    }
}

.question {
    li {
        margin: 10px;

        .title {
            font-size: 18px;
            margin: .1rem 0;
            display: flex;

            .point {
                width: 0.04rem;
                height: 0.04rem;
                border-radius: 50%;
                background-color: darkred;
                box-sizing: border-box;
                margin-top: 0.05rem;
                margin-right: 0.04rem;
            }
        }

        p {
            color: #666666;
            margin: 0 0.1rem;
            line-height: 20px;
            font-size: 14px;
        }
    }
}

.font {
    font-size: 0.2rem;
    color: black;
}

.backButton {
    //position: absolute;
    position: fixed;
    left: 10px;
    top: 20px;
    z-index: 1000000;

    button {
        border-radius: 100%;
        border: rgba(239, 239, 239, 0.4);
        font-size: 20px;
        color: darkred;
        background-color: rgba(239, 239, 239, 0.1);
    }
}

.van-goods-action {
    bottom: 50px;
}
</style>
